import React, {Component} from 'react';
import {Button, Form, Segment} from 'semantic-ui-react'
import PubSub from "pubsub-js";

let WalletTools = require('../servises/service')

class PrivateKeyTab extends Component {
    state = {
        privateKey: '',
        wallet: {},
        isMetaMask:false,

    }

    handleCreateClick = () => {
        let privateKey = WalletTools.createPrivateKey()

        this.setState({privateKey})
        // console.log(this.state)
    }

    //捕捉value变化同步状态变量
    handleChange = (ev, {name, value}) => {
        this.setState({[name]: value})
        //TODO
        //这里使用setState是添加状态变量么？

    }


    //点击登录处理

    onPrivateLoginClick = () => {
        // console.log(this.state.privateKey)
        // let {privateKey} = this.state.privateKey

        //检查密钥合法性并生成钱包

        let privateKey = this.state.privateKey
        if (WalletTools.isValid(privateKey)) {
            let wallet = WalletTools.createWallet(privateKey)
            //同步更新状态变量
            this.setState({wallet: wallet}, () => {
                //校验成功生成钱包后并发布onLoginSuccessfully事件
                PubSub.publish("onLoginSuccessfully", this.state.wallet)
                // console.log(this.state.wallet, 456)
                //这里的状态变量是有变化的
            })
        }
        // console.log(this.state.wallet, 123)
        //TODO
        //上面使用同步更新策略后，在这里打印状态变量没有变化，是同步更新策略没有真正生效还是怎样？





    }

    //通过matemask授权登陆
    onMetamaskClick = async () => {
        try{
            if(window.ethereum.isMetaMask){
                try {

                    const accounts = await window.ethereum.enable()
                    // You now have an array of accounts!
                    // Currently only ever one:
                    // ['0xFDEa65C8e26263F6d9A1B5de9555D2931A33b825']
                    let wallet ={};
                    wallet["isMetaMask"] =true

                    this.setState({wallet: wallet}, () => {

                    //校验成功生成钱包后并发布onLoginSuccessfully事件
                    PubSub.publish("onLoginSuccessfully", this.state.wallet)
                    // console.log(this.state.wallet, 456)
                    //这里的状态变量是有变化的
                    })
                } catch (error) {
                    // Handle error. Likely the user rejected the login:
                    console.log("error",":","User rejected provider access")
                }
            }
        }catch (error){
            alert("当前浏览器未安装metamask插件")
        }




    }

    render() {
        return (
            <Form size="large">
                <Segment>
                    <Form.Input
                        fluid
                        icon="lock"
                        iconPosition="left"
                        placeholder="private key"
                        name="privateKey"
                        value={this.state.privateKey}
                        onChange={this.handleChange}
                    />
                    <Button onClick={this.handleCreateClick}>
                        随机生成
                    </Button>
                    <br/>
                    <br/>
                    <Button
                        color="teal"
                        fluid
                        size="large"
                        onClick={this.onPrivateLoginClick}
                    >
                        私钥导入(下一步)
                    </Button>
                    <br/>
                    <Button
                        color="teal"
                        fluid
                        size="large"
                        onClick={this.onMetamaskClick}
                    >
                        MetaMask授权登陆
                    </Button>
                </Segment>
            </Form>

        );
    }
}


export default PrivateKeyTab;

